<template>
	<gui-page>
		<template v-slot:gBody>
			<gui-a-header title="职业培训" :isShowPlace="false" bg="transparent" color="#fff"></gui-a-header>
			<view class="top-header">
				<image src="../../static/index/trainning_bg2.png" mode="widthFix" style="height: auto;"></image>
				<view class="con cfff flex-dc">
					<text class="f42">{{ trainData.title.substring(0, 4) }}</text>
					<text class="f42" v-if="trainData.title.length > 4">{{ trainData.title.substring(4,
						trainData.title.length) }}</text>
					<view class="saveBtn radius">正在报名中</view>
				</view>
			</view>
			<view class="box bgfff">
				<view class="box-item flex-dc">
					<text class="title colorBlue gui-bold">培训介绍</text>
					<text class="f24 lineHeight">{{ trainData.introduce }}</text>
				</view>
				<view class="box-item flex-dc">
					<text class="title colorBlue gui-bold">培训内容</text>
					<view class="flex-dc lineHeight f24">
						<mp-html :content="$u.richImg(trainData.content)" />
					</view>
				</view>
				<view class="box-item flex-dc">
					<text class="title colorBlue gui-bold">培训简章</text>
					<view class="item-text flex-ac-row f24">
						<text class="item-text-label">报名简章</text>
						<text>{{ trainData.brochure }}</text>
					</view>
					<view class="item-text flex-ac-row f24">
						<text class="item-text-label">培训对象</text>
						<view class="gui-flex1">{{ trainData.goal }}</view>
					</view>
					<view class="item-text flex-ac-row f24">
						<text class="item-text-label">培训时间</text>
						<text>{{ trainData.beginTime }}至{{ trainData.endTime }}</text>
					</view>
					<view class="item-text flex-ac-row f24">
						<text class="item-text-label">培训地址</text>
						<text>{{ trainData.address }}</text>
					</view>
					<view class="item-text flex-ac-row f24">
						<text class="item-text-label">培训人数</text>
						<text>{{ trainData.peopleNumber }}人</text>
					</view>
					<view class="item-text flex-ac-row f24">
						<text class="item-text-label">报名截止</text>
						<text class="colorRed">{{ trainData.deadline }}</text>
					</view>
				</view>
				<view class="saveBtn" @click="sumbit" v-if="trainData.status == 1">报名</view>
				<view class="saveBtn" style="background: #999999;color: #fff;" v-if="trainData.status == 0">已报名</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import {
	storeToRefs
} from 'pinia'
import {
	useUserStore
} from '@/stores/user.js'
const store = useUserStore()
const {
	userInfo
} = storeToRefs(store)
import {
	getTrainInfo,
	trainSign
} from '@/api/user.js';
import {
	ref,
	reactive,
	inject
} from 'vue'
import {
	onLoad
} from '@dcloudio/uni-app';
const trainId = ref('')
const trainData = ref({
	title: ''
})
const $u = reactive(inject('$u'))
const timer = ref(null);

onLoad((option) => {
	if (option.trainId) {
		trainId.value = option.trainId;
		loadData();
	}
})

const loadData = () => {
	getTrainInfo({
		id: trainId.value
	}).then(res => {
		if (res.code == 200) {
			trainData.value = res.data;
		}
	})
}

const sumbit = () => {
	if (!userInfo.value.shUserInfo || userInfo.value.shUserInfo + '' === '0') {
		$u.msg("请先完善个人简历");
		if (timer.value) clearTimeout(timer.value);
		timer.value = setTimeout(() => {
			$u.to(`/pages/mine/curriculumVitae/curriculum-vitae`);
		}, 1000)
		return
	}
	trainSign({
		id: trainData.value.id
	}).then(res => {
		if (res.code == 200) {
			$u.to(`/pages/success/success?type=2`, 'redirectTo')
		}
	})
}
</script>

<style lang="scss">
page {
	background: #fff;
}

.top-header {
	position: relative;

	image {
		width: 750rpx;
	}

	.con {
		position: absolute;
		left: 36rpx;
		bottom: 145rpx;

		text {
			line-height: 60rpx;
			letter-spacing: 8rpx;
		}

		.saveBtn {
			width: 188rpx;
			height: 51rpx;
			background: RGBA(193, 206, 245, .8);
			color: #0034C7;
			margin-top: 35rpx;
		}
	}

}

.box {
	position: relative;
	top: -90rpx;
	border-radius: 50rpx 50rpx 0 0;
	padding: 13rpx 36rpx 0 36rpx;

	.box-item {
		margin-top: 18rpx;

		.title {
			margin-bottom: 16rpx;
		}

		.lineHeight {
			line-height: 40rpx;
		}

		.item-text {
			margin-bottom: 16rpx;
			align-items: flex-start;
			/* 修改为靠上对齐 */

			.item-text-label {
				width: 96rpx;
				margin-right: 20rpx;
			}
		}
	}

	.saveBtn {
		height: 81rpx;
		background: #0034C7;
		margin-top: 60rpx;
	}
}
</style>